<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="apple-mobile-web-app-title" content="足彩"/>
    <title></title>
    <!--font-awsome-css-->
    <link rel="stylesheet" href="../public/styles/font-awesome.min.css">
    <!--bootstrap-->
    <link rel="stylesheet" href="../public/styles/bootstrap.min.css">
    <!-- swiper -->
    <link rel="stylesheet" href="../public/styles/swiper.min.css"/>
    <!--custom css-->
    <link rel="stylesheet" href="../public/styles/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="../public/styles/index.css" />
    <link rel="stylesheet" href="../public/styles/common.css">


</head>
<body>
    <div class="masthead pdng-stn1">
        <!-- 左侧抽屉开始 -->
        <div id="menu" class="panel" role="navigation">
            <button type="button" class="close nav-close">×</button>
            <div class="wrap-content">
                <div class="profile-menu">
                    <ul class="menu-ul">
                        <li><a href="index.html">HOME <i class="fa fa-chevron-right"></i></a></li>
                        <li><a href="allGame.html">ALL GAMES <i class="fa fa-chevron-right"></i></a></li>
                        <li><a href="http://news.futurefun.net">NEWS <i class="fa fa-chevron-right"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 内容开始 -->
        <div class="phone-box wrap push">
            <div id="home" class="menu-notify" style="position: fixed;top: 0;width: 100%;height: 48px">
                <!--<div class="profile-left">
                    <a href="javascript:history.go(-1);" class="menu-link"><i class="fa fa-chevron-left"></i></a>
                </div>-->
                <div class="profile-left">
                    <a href="#menu" class="menu-link"><i class="fa fa-reorder"></i></a>
                </div>
                <div class="Profile-mid logo">
                    <h1>
                        <span class="link coun-title"></span>
                    </h1>
                </div>
                <div class="clearfix"></div>
            </div>
            <!-- recommend -->
            <div class="recommend" style="margin-top: 48px">
                <div class="country-list" id="res-eventList"> </div>
                <script type="text/template" charset="utf-8" id="tpl-eventList">
                    {{? it.length}}
                    <table class="remd-list">
                        <tr>
                            <th width="5">&nbsp;</th>
                            <th width="30%" class="left coun-title"></th>
                            <th width="15%">Result</th>
                            <th width="17%">1</th>
                            <th width="16%">X</th>
                            <th width="17%">2</th>
                        </tr>
                        {{~ it:value:index}}
                        <tr data-eventId="{{= value.eventId}}"  data-homeTeamName="{{= value.homeTeamName}}" data-awayTeamName="{{= value.awayTeamName}}"   data-competitionName="{{= value.competitionName}}" >
                            <td>&nbsp;</td>
                            <td class="left d">
                                <span class="ds">{{= value.homeTeamName}}</span>
                                <span class="ds">{{= value.awayTeamName}}</span>
                                <a href="race-detail.html?eventId={{= value.eventId}}">
                                    <em>{{= $.dateFmt(value.eventTime/10000, "MM-dd hh:mm")}}</em> <span class="block">{{= value.marketCount}}</span> <i class="fa fa-chevron-right"></i>
                                </a>
                            </td>
                            <td class="d orange">
                                {{? value.homeTeamScore}}
                                <span class="ds">{{= value.homeTeamScore}}</span>
                                {{??}}
                                <span class="ds">--</span>
                                {{?}}
                                {{? value.awayTeamScore}}
                                <span class="ds">{{= value.awayTeamScore}}</span>
                                {{??}}
                                <span class="ds">--</span>
                                {{?}}
                            </td>
                            {{? value.market}}
                            {{~ value.market.selections :v:i}}
                            <td class="s orange bg able" data-marketId="{{= value.market.marketId}}" data-ruleType="{{= value.market.ruleType}}" data-verifyResult="{{= value.market.verifyResult}}" data-selectionId="{{= v.selectionId}}" data-maxStakeLimit="{{= v.maxStakeLimit}}" data-v1="{{= v.v1}}" data-v2="{{= v.v2}}" data-v3="{{= v.v3}}" data-backOdds="{{= $.numTofixed(v.backOdds)}}">{{= $.numTofixed(v.backOdds)}}</td>
                            {{~}}
                            {{??}}
                            <td class="s orange bg dis">&nbsp;</td>
                            <td class="s orange bg dis">&nbsp;</td>
                            <td class="s orange bg dis">&nbsp;</td>
                            {{?}}
                        </tr>
                        {{~}}
                    </table>
                    {{??}}
                        <div class="no-order">
                            <img src="../public/images/no-data.png">
                            <p>There is no match</p>
                        </div>
                    {{?}}
                </script>

            </div>
        </div>
    </div>

    <!-- 按钮触发模态框 -->
    <!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#logup">注册</button>-->
    <!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#reset">重置密码</button>-->
    <!-- 登录模态框（Modal） -->
    <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog login-box modal-top">
            <div class="modal-content login-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title center">LOGIN</h4>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" placeholder="Tel Number" name="accountNumber">
                    <input type="password" class="form-control" placeholder="Password" name="password">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn login-btn " id="login-submit">LOGIN</button>
                    <span class="link reset">Forget Password？</span>
                    <span class="link logup pull-right">Logup？</span>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 注册模态框（Modal） -->
    <div class="modal fade" id="logup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog login-box modal-top">
            <div class="modal-content login-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title center">REGISTER</h4>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" placeholder="Tel Number" name="userPhone">
                    <label>
                        <input type="text" class="form-control width70" placeholder="Verification Code" name="userCode">
                        <a href="javascript:;" class="smsSend" id="smsSend">SEND</a>
                    </label>
                    <input type="password" class="form-control" placeholder="Password" name="passWord">
                    <p><span class="agress"style="width: 2rem ;height: 2rem;margin-bottom: 1.5rem"></span>
                        <a href="custom-service.html" class="white"style="margin-left: 1.5rem">Agree《General Terms & Conditions》</a></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn login-btn" id="logup-btn"style="margin-top: 1rem">REGISTER</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 重置密码模态框（Modal） -->
    <div class="modal fade" id="reset" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog login-box modal-top">
            <div class="modal-content login-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title center">Set the Password</h4>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" placeholder="Tel Number" name="userPhone2">
                    <label>
                        <input type="text" class="form-control width70" placeholder="Verification Code" name="userCode2">
                        <a href="javascript:;" class="smsSend" id="re-smsSend">SEND</a>
                    </label>
                    <input type="password" class="form-control" placeholder="Repeat My Password" name="newPassWord">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn login-btn reset-btn">CONFIRM</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 登录失败 -->
    <div class="modal fade" id="login-fail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog login-box modal-top">
            <div class="modal-content login-content">
                <div class="modal-body login-fail">
                    <h5>LOGIN FAILED</h5>
                    <p id="login_fail_msg" class="orange">The Password is Wrong</p>
                </div>
                <div class="modal-footer betSuc-footer">
                    <button type="button" data-dismiss="modal" class="btn login-btn fail-btn">OK</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部分享框（Modal） -->
    <!-- loading -->
    <!--<div class="ind-loading" id="ind-loading" style="display: block;">-->
    <!--<div class="spinner">-->
    <!--<div class="bubble-1"></div>-->
    <!--<div class="bubble-2"></div>-->
    <!--</div>-->
    <!--</div>-->

    <script type="text/javascript" src="../public/scripts/vendor/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../public/scripts/vendor/bootstrap.min.js"></script>
    <script type="text/javascript" src="../public/scripts/vendor/jquery.cookie.js"></script>
    <script type="text/javascript" src="../public/scripts/vendor/doT.min.js"></script>
    <script type="text/javascript" src="../public/scripts/common.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.coun-title').html($.getQueryString('competitionName').substr(0,30));

            $('.menu-link').sidebar();
            var competitionId = $.getQueryString('competitionId');

            $.ajax({
                type: 'get',
                url: apiDomain + '/order/getEventList?' + new Date().getTime(),
                dataType: "json",
                cache: false,
                data: {competitionId: competitionId},
                success: function (data) {
                    console.log(data);
                    if (data.code == "0") {
                        //渲染模版
                        var tpl = doT.template($("#tpl-eventList").html());
                        $("#res-eventList").html(tpl(data.results));

                    } else {
                        //简单提示框
                        $.blt(data.msg);
                    }
                }
            })
                //忘记密码
                $('body').on('click', '.reset', function(){
                    $('#login').modal('hide');
                    $('#reset').modal('show');
                })
                //注册
                $('body').on('click', '.logup', function(){
                    $('#login').modal('hide');
                    $('#logup').modal('show');
                })
                //注册提交
                $('body').on('click', '#logup-btn', function(){
                    $.register();
                })

                $('body').on('click', '.agress', function(){
                    $(this).toggleClass('agreed');
                })

                //登录提交
                $('body').on('click', '#login-submit', function(){

                    var accountNumber = $('input[name="accountNumber"]').val();
                    var password = $('input[name="password"]').val();
                    $.login(accountNumber,password);
                })



                if($.cookie('userReadMessageState')=="0"){
                    $('.news-tip').show();
                }else{
                    $('.news-tip').hide();
                }
                $('body').on('click', '#smsSend', function(){
                    $.getCode($('input[name="userPhone"]'));
                })
                $('body').on('click', '#re-smsSend', function(){
                    $.getCode($('input[name="userPhone2"]'));
                })

                $('body').on('click', '.reset-btn', function(){
                    $.reset();
                })
        });

    </script>
</body>
</html>